<template>
    <div>
        <div class="tushu">
            <div @click="router.go(-1)"><van-icon name="arrow-left" /></div>
            <div>我的书架</div>
        </div>
        <div class="zheng">
            <div>正在看的图书</div>
            <div @click="isxian=!isxian">
                  <div @click="iszheng=!iszheng">
                <div v-if="iszheng"><van-icon name="arrow" /></div>
                <div v-else><van-icon name="arrow-down" /></div>
            </div>
            </div>
            
           
        </div>
        <div v-if="isxian">
            <div v-for="item in shujiaList" :key="item.id" class="ts" v-show="item.stat===0">
                <div>{{item.name}}</div>
                <div @click="handleduwan(item)">添加到已读完</div>
            </div>
        </div>

        <div class="yi">
            <div>已看完的图书</div>
            <div @click="iskanxian=!iskanxian">
            <div @click="iskan=!iskan">
                <div v-if="iskan"><van-icon name="arrow" /></div>
                <div v-else><van-icon name="arrow-down" /></div>
            </div>
            </div>
        </div>
        <div v-if="iskanxian">
            <div v-for="item in shujiaList" :key="item.id" class="ts" v-show="item.stat===1">
                <div>{{item.name}}</div>
                <div @click="handledu(item)">添加到正在读</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {computed, ref} from 'vue'
import {useStore}from 'vuex'
import { useRouter } from 'vue-router'
const router=useRouter()
const iszheng=ref(true)
const iskan=ref(true)
const isxian=ref(false)
const store=useStore()
const iskanxian=ref(false)
const shujiaList=computed(()=>store.state.booklist)
const handleduwan=(item)=>{
    item.stat=1
}
const handledu=(item)=>{
    item.stat=0
}
</script>

<style scoped>
.tushu {
  display: flex;
  justify-content: space-between;
  background: red;
}
.tushu div:nth-child(1) {
  width: 20%;
}
.tushu div:nth-child(2) {
  width: 80%;
  text-align: center;
}
.zheng {
  background: red;
  color: white;
  display: flex;
  justify-content: space-between;
}
.yi{
  background: red;
  color: white;
  display: flex;
  justify-content: space-between;
}
.ts{
    display: flex;
    justify-content: space-around;
}
</style>